<template>
  <view class="card-container">
    <!-- 顶部Tab切换 -->
    <view class="tab-header">
      <view
        :style="{ color: currentTab == index ? t('color1') : '' }"
        class="tab-item"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        {{ tab }}
        <view
          :style="{ backgroundColor: t('color2') }"
          class="active-curve"
        ></view>
      </view>
    </view>

    <!-- 卡包内容 -->
    <view class="content-section" v-if="currentTab === 0">
      <template v-if="myCards.length > 0">
        <view class="card-list">
          <view
            class="card-item"
            v-for="(card, index) in myCards.filter((c) => c.status != 2)"
            :key="index"
          >
            <view
              class="card-main"
              :style="{
                backgroundImage: `url(${card.icon})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }"
              @tap="handleDetail(card)"
            >
              <view class="card-mask"></view>
              <view class="card-content">
                <!-- <view class="card-type">{{ card.card_name }}</view> -->
                <!-- <view class="card-number">{{ card.card_num }}</view> -->
                <view class="card-balance">
                  <!-- <image
                    class="label"
                    src="@/pagesSocial/static/img/view_white.png"
                    style="width: 45rpx; height: 45rpx"
                  ></image>
                  <text class="label">剩余余额:</text>
                  <text class="label">{{ card.money }}</text> -->
                  <!-- <view class="label2">余额: {{ card.money }}</view> -->
                </view>
              </view>
            </view>
            <view class="label2">余额: {{ card.money }}</view>
            <view class="card-info" v-if="false">
              <view class="card-info-left">
                <view class="card-type">{{ card.card_name }}</view>
                <view class="card-number">{{ card.card_num }}</view>
              </view>
              <view class="card-info-right">
                <view class="card-balance">
                  <text class="label">余额</text>
                  <text class="amount">¥{{ card.money }}</text>
                </view>
              </view>
            </view>
            <view class="card-actions" v-if="false">
              <button class="action-btn primary" @tap="handleRecharge(card)">
                充值
              </button>
              <!-- <button class="action-btn" @tap="handleGive(card)" v-if="card.mid == mid">赠送</button>
							<button class="action-btn" @tap="handleUnbind(card)" v-if="card.bind_mid != 0">解绑</button> -->
              <button class="action-btn" @tap="handleDetail(card)">详情</button>
            </view>
          </view>
        </view>
      </template>
      <view v-else class="empty-state">
        <image
          class="empty-icon"
          src="../../static/img/empty.png"
          mode="aspectFit"
        ></image>
        <text class="empty-text">暂无可以使用的卡片</text>
        <button
          :style="{ backgroundColor: t('color1') }"
          class="buy-btn"
          @tap="goToShop"
        >
          去购卡中心
        </button>
      </view>
    </view>

    <!-- 购卡中心内容 -->
    <view class="content-section" v-if="currentTab === 1">
      <view class="card-list" v-if="shopCards.length > 0">
        <view class="card-item" v-for="(card, index) in shopCards" :key="index">
          <view
            class="card-main"
            :style="{
              backgroundImage: `url(${card.icon})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }"
            @tap="handleDetail(card)"
          >
            <view class="card-mask"></view>
            <view class="card-content">
              <!-- <view class="card-type">{{ card.type }}</view>
							<view class="card-price">
								<text class="price-label">售价</text>
								<text class="price-amount">¥{{ card.price }}</text>
							</view>
							<view class="card-desc">{{ card.description }}</view> -->
            </view>
          </view>
          <view class="card-info" v-if="false">
            <view class="card-info-left">
              <view class="card-type">{{ card.name }}</view>
              <view class="card-number">{{ card.describe }}</view>
            </view>
            <view class="card-info-right">
              <view class="card-balance">
                <text class="label">售价</text>
                <text class="amount">¥{{ card.money_condition }}</text>
              </view>
            </view>
          </view>
          <view class="card-actions" v-if="false">
            <button class="action-btn primary" @tap="handleBuy(card)">
              购买
            </button>
            <button class="action-btn" @tap="handleDetail(card)">详情</button>
          </view>
        </view>
      </view>
      <view v-else class="empty-state">
        <image
          class="empty-icon"
          src="../../static/img/empty.png"
          mode="aspectFit"
        ></image>
        <text class="empty-text">暂无可以购买的卡片</text>
      </view>
    </view>
    <uni-popup id="dialogInput2" ref="dialogInput2" type="dialog">
      <uni-popup-dialog
        mode="input"
        title="充值金额"
        value=""
        placeholder="请输入充值金额"
        @confirm="getRecharge"
        password="true"
      ></uni-popup-dialog>
    </uni-popup>
    <uni-popup id="dialogInput3" ref="dialogInput3" type="dialog">
      <uni-popup-dialog
        mode="input"
        title="购买金额"
        value=""
        placeholder="请输入购买金额"
        @confirm="getbuy"
      ></uni-popup-dialog>
    </uni-popup>
    <loading v-if="loading"></loading>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      loading: false,
      currentTab: 0,
      mid: 0,
      tabs: ["我的卡包", "购卡中心"],
      cid: 0,
      myCards: [
        // {
        // 	"id": 6,
        // 	"aid": 3,
        // 	"mid": 393,
        // 	"vip_card_config_id": 3,
        // 	"card_name": "普通卡",
        // 	"card_num": "VIP25021715520338951",
        // 	"password": "",
        // 	"money": "999999.00",
        // 	"bind_mid": 0,
        // 	"status": 0,
        // 	"accumulate_money": "1.00",
        // 	"createtime": 1739778723,
        // 	"updatetime": 1739778723,
        // 	"bind_time": 0,
        // 	"unbind_time": 0,
        // 	bgImg: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/c3da2db730225037d00dab6bdb8d3fb5.jpg'
        // },
      ],
      shopCards: [
        // 	{
        // 	"id": 1,
        // 	"aid": 3,
        // 	"name": "金卡",
        // 	"money_condition": "50000.00",
        // 	"discount": 95,
        // 	"icon": "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250126/fbc55db41cfc73cd92235812029230ba.jpg",
        // 	"describe": "充值1000元得1200元，限时特惠,仅限2025年2月17日,充值1000元得1200元，限时特惠",
        // 	"createtime": 1739763058,
        // 	"updatetime": 1739763545,
        // 	bgImg: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/0015b70736fe0553761222c991ebe102.jpg"
        // }
      ],
      card: null,
    };
  },
  onLoad: function (opt) {
    this.mid = app.globalData.mid;
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  onShow() {
    this.getdata();
  },
  methods: {
    getdata() {
      app.showLoading("加载中");
      var that = this;

      if (that.currentTab == 0) {
        app.get("MemberVipCard/myCard", {}, function (res) {
          if (res && res.status == 200) {
            that.myCards = res.data;
            app.showLoading(false);
          } else {
            app.showLoading(false);
            app.error(res.msg);
          }
          that.loaded();
        });
      } else {
        app.get("MemberVipCard/config", {}, function (res) {
          if (res && res.status == 200) {
            that.shopCards = res.data;
            app.showLoading(false);
          } else {
            app.showLoading(false);
            app.error(res.msg);
          }
          that.loaded();
        });
      }
    },

    switchTab(index) {
      this.currentTab = index;
      this.getdata();
    },

    handleRecharge(card) {
      this.cid = card.id;
      this.$refs.dialogInput2.open();
    },

    getRecharge(done, val) {
      var that = this;
      if (val == "") {
        app.error("金额不能为空");
        return;
      }
      that.loading = true;
      app.post(
        "MemberVipCard/recharge",
        { money: val, member_vip_card_id: that.cid },
        function (res) {
          that.loading = false;
          if (res.status == 200) {
            app.goto("/pages/pay/pay?id=" + res.payorderid);
          } else {
            app.error(res.msg);
          }
        }
      );
    },

    handleUnbind(card) {
      uni.showModal({
        title: "提示",
        content: "确定要解绑该卡片吗？",
        success: (res) => {
          if (res.confirm) {
            // 处理解绑逻辑
            uni.showToast({
              title: "解绑成功",
              icon: "success",
            });
          }
        },
      });
    },

    // handleBuy(card) {
    // 	uni.showModal({
    // 		title: '确认购买',
    // 		content: `确定要购买${card.type}吗？`,
    // 		success: (res) => {
    // 			if (res.confirm) {
    // 				// 处理购买逻辑
    // 				uni.showToast({
    // 					title: '购买成功',
    // 					icon: 'success'
    // 				});
    // 			}
    // 		}
    // 	});
    // },

    handleBuy(card) {
      var that = this;
      if (card.money_condition == 0) {
        that.card = card;
        that.$refs.dialogInput3.open();
      } else {
        that.buyCard(card);
      }

      // var that = this;
      // that.loading = true;
      // console.log(card);
      // app.post('MemberVipCard/buyCard', { money: card.money_condition, config_id: card.id }, function (res) {
      // 	that.loading = false;
      // 	if (res.status == 200) {
      // 		app.goto('/pages/pay/pay?id=' + res.payorderid);
      // 	} else {
      // 		app.error(res.msg);
      // 	}
      // });
    },

    buyCard(card, val = card.money_condition) {
      var that = this;
      that.loading = true;
      console.log(card);
      app.post(
        "MemberVipCard/buyCard",
        { money: val, config_id: card.id },
        function (res) {
          that.loading = false;
          if (res.status == 200) {
            app.goto("/pages/pay/pay?id=" + res.payorderid);
          } else {
            app.error(res.msg);
          }
        }
      );
    },

    handleDetail(card) {
      let url =
        this.currentTab == 0
          ? "/pagesExt/vip/vipcard?id=" + card.id
          : "/pagesExt/vip/vipinfo?id=" + card.id;
      uni.navigateTo({
        url: url,
      });
    },

    goToShop() {
      this.currentTab = 1;
      this.getdata();
    },

    getbuy(done, val) {
      var that = this;
      if (val == "") {
        app.error("金额不能为空");
        return;
      }
      that.buyCard(that.card, val);
    },

    handleGive(card) {},
  },
};
</script>

<style lang="scss">
.card-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;

  .tab-header {
    display: flex;
    background: #fff;
    padding: 20rpx 40rpx;
    margin-bottom: 30rpx;
    position: sticky;
    top: 0;
    z-index: 9;

    .tab-item {
      position: relative;
      padding: 20rpx 40rpx;
      font-size: 32rpx;
      color: #666;
      margin-right: 60rpx;

      &.active {
        color: #333;
        font-weight: bold;

        .active-curve {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: #ba1f25;
          border-radius: 2rpx;
        }

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          // background: #BA1F25;
          border-radius: 2rpx;
        }
      }
    }
  }

  .content-section {
    padding: 0 30rpx;

    .card-list {
      .card-item {
        margin-bottom: 30rpx;
        border-radius: 30rpx;
        overflow: hidden;
        background: #fff;
        // box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
        position: relative;

        .label2 {
          font-size: 29rpx;
          color: #a08055;
          display: flex;
          align-items: center;
          position: absolute;
          bottom: 0rpx;
          right: 0rpx;
          margin: 30rpx;
        }

        .card-main {
          padding: 40rpx;
          color: #fff;
          min-height: 340rpx;
          position: relative;
          overflow: hidden;

          .card-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
          }

          .card-content {
            position: relative;
            z-index: 2;

            .card-balance {
              display: flex;
              align-items: center;
              gap: 10rpx;
              margin-top: 20rpx;
              position: absolute;
              right: 4rpx;
              bottom: -190rpx;

              .label {
                font-size: 29rpx;
                color: #fff;
                opacity: 0.9;
                display: flex;
                align-items: center;
              }

              .label2 {
                font-size: 29rpx;
                color: #a08055;
                display: flex;
                align-items: center;
              }
            }
          }

          .card-type {
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
          }

          .card-number {
            font-size: 32rpx;
            margin-bottom: 40rpx;
            letter-spacing: 4rpx;
            text-shadow: 1px 2px 3px rgba(0, 0, 0, 1);
          }

          .card-balance,
          .card-price {
            // text-shadow: 1px 2px 3px rgba(0, 0, 0, 1);

            .label,
            .price-label {
              font-size: 28rpx;
              opacity: 0.9;
            }

            .amount,
            .price-amount {
              font-size: 48rpx;
              font-weight: bold;
              margin-left: 20rpx;
            }
          }

          .card-desc {
            font-size: 28rpx;
            opacity: 0.9;
            margin-top: 20rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
          }
        }

        .card-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20rpx;
          background: #fff;

          .card-info-left {
            width: 45%;
          }

          .card-type {
            font-size: 32rpx;
            font-weight: bold;
          }

          .card-number {
            font-size: 27rpx;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .card-balance,
          .card-price {
            .label,
            .price-label {
              font-size: 28rpx;
              opacity: 0.9;
            }

            .amount,
            .price-amount {
              font-size: 48rpx;
              font-weight: bold;
              margin-left: 20rpx;
            }
          }
        }

        .card-actions {
          display: flex;
          padding: 20rpx;
          background: #fff;

          .action-btn {
            flex: 1;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 28rpx;
            color: #666;
            background: #f5f5f5;
            border-radius: 40rpx;
            margin: 0 10rpx;
            border: none;

            &.primary {
              background: #ba1f25;
              color: #fff;
            }

            &::after {
              border: none;
            }
          }
        }
      }
    }

    .empty-state {
      padding: 100rpx 0;
      text-align: center;

      .empty-icon {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
      }

      .empty-text {
        font-size: 30rpx;
        color: #999;
        margin-bottom: 40rpx;
        display: block;
      }

      .buy-btn {
        width: 300rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #ba1f25;
        color: #fff;
        font-size: 30rpx;
        border-radius: 40rpx;
        margin: 0 auto;

        &::after {
          border: none;
        }
      }
    }
  }
}
</style>
